<template>
  <div class="module-wrapper">
    <div class="tool-bar">
      <div class="menu-list">
        <div class="menu-item" @click="selectTab(index+1)" :class="currentMenuIndex === index+1 ? 'active' : ''" v-for="(menu, index) in menuList" :key="index">{{menu.name}}</div>
      </div>
    </div>
    <div class="content" ref="scrollcontainer" v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="moduleItem in moduleList" :key="moduleItem.id" class="module-item" @click="showModuleDetail(moduleItem.id)">
        <div class="module-cover">
          <img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/module/'+moduleItem.plateImg"  style="width: 70px; height: 70px; border-radius: 5px;display:block;">
        </div>
        <div class="module-name">{{moduleItem.plateName}}</div>
        <div class="module-desc"><div>{{moduleItem.plateInfo}}</div></div>
        <div class="module-owner"><img :src="moduleItem.plateManagerAvatar">{{moduleItem.plateManagerName}}</div>
      </div>
      <img v-if="moduleList.length === 0  && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
    </div>
    <div style="text-align: center; line-height: 24px; color: #979797;" v-if="totalCount > 0">共有{{totalCount}}个版块</div>
    <div @click="addOrEditPlate(false)" class="add-btn" :class="canCreateModule ? '' : 'forbidden'" :style="{'bottom': bottomBtnPosition}"><i class="el-icon-plus"></i></div>
    <Tab currentTab="module"/>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import Tab from './component/Tab'

export default {
  data() {
    return {
      currentScrollTop: 0,
      bottomBtnPosition: '20px',
      currentMenuIndex: 2,
      menuList: [{index: 1, name: '我管理的'}, {index: 2, name: '我参与的'}, {index: 2, name: '已归档版块'}],
      moduleList: [],
      isFirstLoading: true,
      loading: false,
      page: 1,
      limit: 20,
      totalPage: 1,
      totalCount: 0
    }
  },
  mixins: [dingMixin],
  components: {
    Tab
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    canCreateModule() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1260854998536855554')
    }
  },
  beforeRouteLeave(to,from,next) {
    this.currentScrollTop = this.$refs.scrollcontainer.scrollTop;
    this.mobileStopRefresh()
    next()
  },
  activated() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone') {
        this.mobildPullToRefresh(() => {
          this.getModuleList(true)
        });
      }
    })
    if(window.NEEDREFRESH) {
      this.getModuleList(true)
      window.NEEDREFRESH = false;
    }else {
      this.$refs.scrollcontainer.scrollTop = this.currentScrollTop;
    }
  },
  methods: {
    loadData() {
      this.loading = true;
      this.page ++;
      this.getModuleList();
    },
    async selectTab(index) {
      this.currentMenuIndex = index;
      await this.getModuleList(true);
    },
    async getModuleList(init) {
      if(init) {
        this.page = 1;
        this.moduleList = [];
        this.isFirstLoading = true;
      }
      if(this.currentMenuIndex === 3) {
        var {list, totalCount, totalPage} = await this.$httpN.postB('division/plate/archiveList', {
          page: this.page,
          limit: this.limit
        })
      }else {
        var {list, totalCount, totalPage} = await this.$httpN.postB('division/plate/list', {
          page: this.page,
          limit: this.limit,
          participateType: this.currentMenuIndex
        })
      }
      this.loading = false;
      this.moduleList.push(...list);
      if(init){
        this.totalPage = totalPage;
        this.totalCount = totalCount
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    showModuleDetail(id) {
      this.$router.push({ name: 'mlivolobim-moduleDetail', params: {moduleId: id}});
    },
    addOrEditPlate(id) {
      if(this.canCreateModule) this.$router.push({ name: 'mlivolobim-addOrUpdateModule', params: {moduleId: id}});
    },
  },
  async mounted() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBtnPosition = '66px';
      }
    })
    await this.getModuleList(true);
  }
}
</script>

<style lang="scss" scoped>
.module-wrapper {
  height: calc(100vh - 46px);
  box-shadow: 4px 4px 4px rgb(221, 221, 221);
  position: relative;
  .tool-bar {
    background-color: #FFF;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #ECECEC;
    .menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .menu-item {
        padding: 0 20px;
        border-radius: 20px;
        text-align: center;
      }
      .active {
        color: #4983FF;
      }
    }
  }
  .content{
    height: calc(100% - 46px - 24px);
    overflow-y: auto;
    background-color: #FFF;
    .module-item{
      position: relative;
      border-bottom: 1px solid #ECECEC;
      padding: 15px 15px;
      padding-left: 100px;
      cursor: pointer;
      .module-cover{
        position: absolute;
        height: 70px;
        width: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 5px;
        top: 15px;
        left: 15px;
        font-size: 40px;
      }
      img{
        height: 20px;
        width: 20px;
        border-radius: 50%;
        margin-right: 6px;
        position: relative;
        top: -2px;
      }
      .module-name{
        min-height: 16px;
      }
      .module-desc{
        font-weight: 400;
        font-size: 13px;
        color: #979797;
        margin-top: 3px;
        height:30px;
        display: flex;
        align-items: center;
        div{
          line-height: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .module-owner{
        margin-top: 3px;
        color: #979797;
        font-size: 12px;
      }
      .tool {
        position: absolute;
        top: 38px;
        right: 25px;
        i {
          font-size: 18px;
          color: #79828C;
        }
      }
    }
  }
  .module-edit-page {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    background: white;
    overflow: auto;
    .module-edit-wrapper {
      position: relative;
      height: 100%;
      padding: 16px;
      .task-name{
        position: relative;
        height: 90px;
        border-bottom: 1px solid #e7e5e5;
        padding-left: 105px;
        padding-top: 5px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 3px;
          position: absolute;
          top:5px;
          left:20px;
        }
        textarea{
          width: 100%;
          height: 80px;
          border: none;
          outline: none;
          resize:none;
        }
      }
      .form-item-wrapper{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #e7e5e5;
        line-height: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        .form-label{
          width: 110px;
          height: 50px;
          color: #909399;
          i{
            margin-right: 3px;
          }
        }
        .form-input{
          width: calc(100% - 110px);
          color: #C0C4CC;
          flex: 1;
          input{
            width: 100%;
            height: 90%;
            border: 0;
            outline: none;
          }
          span {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .fileitem{
          line-height: 32px;
          margin-bottom: 5px;
          background: #F5F5F5;
          padding-left:10px;
          font-size: 12px;
          color: #606266;
          .uploadtip{
            float:right;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
      .action-bar{
        position: absolute;
        line-height: 50px;
        width: 100%;
        bottom: 0;
        left: 0;
        display:flex;
        text-align: center;
        div{
          flex:1;
          font-size: 16px;
        }
        >div:first-child{
          background: #F2F2F2;
          color: #909399;
        }
        >div:last-child{
          color: white;
          background: #639efc;
        }
        >div.forbidden {
          background-color: #909399;
          color: #FFF;
        }
      }
    }
    .info-page{
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background: white;
      padding: 16px;
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        display: flex;
        div{
          flex:1;
          text-align: center;
          line-height: 50px;
          color:white;
          background: #639EFC;
        }
      }
      .task-info{
        textarea{
          width: 100%;
          height: 250px;
          border: none;
          outline: none;
          resize:none;
          background: #F9F9F9;
          padding: 10px;
        }
      }
    }
  }
  .module-detail-page {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: white;
    .tool-bar {
      background-color: #FFF;
      height: 46px;
      line-height: 46px;
      .menu-list {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        .menu-item, i{
          padding: 0 20px;
          text-align: center;
          line-height: 46px;
        }
        .active {
          color: #4983FF;
        }
      }
    }
    .project-wrapper {
      height: calc(100vh - 46px);
      overflow: auto;
      .task-item{
        width: calc(100% - 40px);
        margin: 20px;
        background-color: #FFF;
        border-radius: 5px;
        box-shadow: 0px 0px 1px rgb(221, 221, 221);
        border: 1px solid #D3E3E8;
        padding: 20px 30px;
        cursor: pointer;
        position: relative;
        .arrow-status{
          width:0;
          height:0;
          position: absolute;
          top: 0;
          left: 0;
          border-top-left-radius: 5px;
          border-top:solid 30px #21D779;
          border-left:solid 30px #21D779 ;
          border-bottom:solid 30px transparent;
          border-right:solid 30px transparent;
          &.arrow-1{
            border-top:solid 30px #21D779;
            border-left:solid 30px #21D779 ;
          }
          &.arrow-2{
            border-top:solid 30px #4495FF;
            border-left:solid 30px #4495FF ;
          }
          &.arrow-3{
            border-top:solid 30px #B0C7CD;
            border-left:solid 30px #B0C7CD ;
          }
        }
        .task-status{
          position: absolute;
          width: 60px;
          line-height: 20px;
          left: -6px;
          top: 11px;
          color: white;
          font-size: 12px;
          transform: rotate(-45deg);
          text-align: center;
          font-weight: normal;
        }
        &::after{
          content: '';
          width:0;
          height:0;
          position: absolute;
          top: 0;
          left: 0;
          border-top-left-radius: 5px;
          border-top:solid 15px white;
          border-left:solid 15px white ;
          border-bottom:solid 15px transparent;
          border-right:solid 15px transparent;
        }
        .top{
          display:flex;
          margin-bottom: 10px;
          .logo{
            width: 48px;
            height: 48px;
            text-align: center;
            background: #E6A23C;
            border-radius: 4px;
            i{
              line-height: 48px;
              font-size: 30px;
              color: #FFF;
            }
          }
          .task-info{
            p{
              margin: 0;
              padding-left:10px;
            }
            .project{
              margin-top: 15px;
              span{
                background: #FFDCDC;
                color: #FF5050;
                padding: 2px 6px;
                border-radius: 3px;
              }
            }
          }
        }
        .bottom{
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content:space-between;
          align-content: flex-start;
          p{
            margin: 5px 0 0 0 ;
            color: #79828C;
            i{
              margin-right: 5px;
            }
          }
          .overdue {
            color: #FF5050;
          }
        }
      }
    }
  }
  .add-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
  }
  .forbidden {
    background-color: #909399;
    background-image: none;
  }
}
.el-dialog__wrapper {
  .cover-wrapper{
    display: flex;
    flex-wrap: wrap;
    div{
      height: 40px;
      width: 40px;
      background: #E6A23C;
      color: white;
      line-height: 40px;
      text-align: center;
      font-size: 40px;
      position: relative;
      border-radius: 5px;
      margin: 5px;
    }
  }
  .task-range-wrapper {
    margin: -30px -20px 0 -20px;
    .row {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
    }
    .active {
      color: #409EFF;
    }
  }
}
</style>